* {
    padding: 0;
    margin: 0;
    list-style: none;
}
.container{
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: antiquewhite;
    
    nav,main{
        background-color: pink;
        transition: width 0.2s;
    }
    nav{
        width: 0;
    }
    main{
        width: 100%;
        overflow: auto;
        background-color: white;

        .titleBox{
            width: 100%;
            background-color: skyblue;
            padding: 20px 0;
            text-align: center;
            position: relative;

            .openNav{
                position: absolute;
                top: 10px;
                left: 10px;
            }

            h2{
                color: white;
            }

            .login{
                width: 80px;
                height: 30px;
            }
        }

        .content{
            width: 100%;
            padding: 20px 0;
            display: flex;

            .leftArea{
                width: 40%;
                border-right: 1px solid black;
                display: flex;
                align-items: flex-end;
                flex-direction: column;

                button{
                    width: 200px;
                    height: 40px;
                    margin: 10px 0;
                }
            }

            .rightArea{
                width: 400px;
                margin: 0 10px;
                position: relative;
                
                .title,.dataBox ul>li,.totalBox>div{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    font-weight: bold;
                }

                .dataBox ul>li{
                    font-weight:500;
                    margin: 8px 0;
                }

                .totalBox{
                    position: absolute;
                    width: 100%;
                    bottom: 10px;
                }
            }
        }
    }
}